<template>
  <div>
    <div class="resource-top">
      <div class="resource-box">
        <a href="##">发布资源合计<b>62</b></a>
        <a href="##">待审核<b>33</b></a>
        <a href="##">今日发布<b>18</b></a>
      </div>
      <div class="resource-box ">
        <a href="##" class="width70"><span>Hi,您好！</span>您今天通过系统发布 {{todayResource}} 条资源</a>
        <el-button v-if="permission == 3" type="primary" icon="el-icon-edit" style="margin-right: 20px;"
                   @click="isShowAdd=true">我要发布
        </el-button>
      </div>
    </div>
    <div class="app-container">
      <div class="filter-container c-flex-row c-aligni-center c-justify-sb">
        <el-form class="form-container">
          <div style="border-bottom: 1px solid #eee;padding-bottom: 10px; padding-left: 20px;">
            <el-select style="width: 120px;" v-model="listQuery.selectType" placeholder="请选择类型">
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.value"
                :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker type="date" style="width:200px;" format="yyyy-MM-dd" placeholder="请选择提交时间（开始）"
                            v-model="listQuery.commit_time">
            </el-date-picker>
            <span style="padding: 0 10px;font-size: 12px;color: #666;">到</span>
            <el-date-picker type="date" style="width:200px;" format="yyyy-MM-dd" placeholder="请选择提交时间（结束）"
                            v-model="listQuery.commit_end_time">
            </el-date-picker>
            <el-date-picker type="date" style="width:200px;" format="yyyy-MM-dd" placeholder="成为发布时间（开始）"
                            v-model="listQuery.publish_time">
            </el-date-picker>
            <span style="padding: 0 10px;font-size: 12px;color: #666; ">到</span>
            <el-date-picker type="date" style="width:200px;" format="yyyy-MM-dd" placeholder="成为发布时间（结束）"
                            v-model="listQuery.publish_end_time">
            </el-date-picker>
          </div>
          <div style="">
						<span
              style="display:inline-block;width: 80%;height:100%;border-right: 1px solid #eee;padding:10px 0 10px 20px;">
							<el-select style="width: 150px;" v-model="listQuery.selectStatus" placeholder="请选择资源状态">
							    <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.value"
                    :value="item.value">
							    </el-option>
							</el-select>
							<el-input v-model="listQuery.memberName" clearable placeholder="会员名" style="width: 150px;"></el-input>
							<el-input v-model="listQuery.titleKeyword" clearable placeholder="标题关键字" style="width: 200px;"></el-input>
						</span>
            <el-button class="search" type="primary" style="margin-left: 20px" icon="el-icon-search">搜索</el-button>
          </div>
        </el-form>
      </div>
      <div>
        <el-table :data="tableData" row-key="id" border fit highlight-current-row style="width: 100%;font-size: 12px;">
          <el-table-column align="center" label="名称">
            <template slot-scope="scope">
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="类型">
            <template slot-scope="scope">
              <span class="circle-o" v-show="scope.row.sort=='求'">求</span>
              <span class="circle-b" v-show="scope.row.sort=='供'">供</span>
              <span>{{scope.row.type}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发布者">
            <template slot-scope="scope">
              <span>{{scope.row.promulgator}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="提交时间" width="130">
            <template slot-scope="scope">
              <span>{{scope.row.commitTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发布时间" width="130">
            <template slot-scope="scope">
              <span
                v-show="scope.row.publishTime!=''">{{scope.row.publishTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.status}}</span>
              <p v-if="scope.row.status=='未审核'">
                <el-button type="primary" size="small">不通过</el-button>
                <el-button type="primary" size="small">通过</el-button>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <b @click="linkToEdit(scope.row.id,scope.row.sort,scope.row.type)">查看详情</b>
            </template>
          </el-table-column>
        </el-table>
        <div class="block text-c">
          <!--分页组件 current-page:当前页   -->
          <!--   page-sizes:每页几条数据（选项）   -->
          <!--   page-size:每页几条数据   -->
          <!--   total:总条数   -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listQuery.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <addRescource v-show="isShowAdd" @hideAdd="hideAdd"></addRescource>
  </div>
</template>
<script>
  import {knowledge_resource} from '@/utils/permission'
  const componentsOption = [
    {id: 0, name: '供 项目', path: '/resource/createOfferItem'},
    {id: 1, name: '供 资金', path: '/resource/createOfferFinance'},
    {id: 2, name: '供 场地', path: '/resource/createOfferField'},
    {id: 3, name: '供 人脉', path: '/resource/createOfferPeople'},
    {id: 4, name: '求 项目', path: '/resource/createBegItem'},
    {id: 5, name: '求 资金', path: '/resource/createBegFinance'},
    {id: 6, name: '求 场地', path: '/resource/createBegField'},
    {id: 7, name: '求 人脉', path: '/resource/createBrgPeople'}
  ]
  export default {
    components: {
      addRescource: require('./components/addComponents/addResource.vue').default // 引入发布资源组件
    },
    data() {
      return {
        permission: 3,
        listQuery: {
          currentPage: 1, // 当前页
          total: null, // 数据总条数
          selectType: null, // 搜索的资源类型
          commit_time: null, // 搜索的提交时间（开始）
          commit_end_time: null, // 搜索的提交时间（结束）
          publish_time: null, // 搜索的发布时间（开始）
          publish_end_time: null, // 搜索的发布时间（结束）
          selectStatus: null, // 搜索的资源状态
          memberName: '', // 搜索的会员名
          titleKeyword: '' // 搜索的标题关键字
        },
        isShowAdd: false, // 是否显示发布资源组件
        todayResource: '14', // 今日发布资源数
        componentsOption, // 菜单组件
        typeOptions: [
          {
            id: 0,
            value: '资金'
          }, {
            id: 1,
            value: '场地'
          }, {
            id: 2,
            value: '项目'
          }, {
            id: 3,
            value: '人脉'
          }
        ],
        statusOptions: [
          {
            id: 0,
            value: '发布中'
          }, {
            id: 1,
            value: '待审核'
          }, {
            id: 2,
            value: '未通过审核'
          }
        ],
        tableData: [
          {
            id: 0,
            name: '求两室一厅一套',
            type: '场地',
            promulgator: '系统发布', // 发布者
            commitTime: '1254645645646',
            publishTime: '',
            status: '未审核',
            sort: '求'
          },
          {
            id: 1,
            name: '求工人15枚',
            type: '人脉',
            promulgator: '', // 发布者
            commitTime: '1254645645646',
            publishTime: '1364564564654',
            status: '发布中',
            sort: '求'
          },
          {
            id: 2,
            name: '资金',
            type: '资金',
            promulgator: '', // 发布者
            commitTime: '1254645645646',
            publishTime: '',
            status: '未审核',
            sort: '供'
          },
          {
            id: 3,
            name: '房产',
            type: '项目',
            promulgator: '系统发布', // 发布者
            commitTime: '1254645645646',
            publishTime: '',
            status: '未审核',
            sort: '求'
          }
        ]
      }
    },
    methods: {
      getModelPermission() {
        this.permission = knowledge_resource()
      },
      hideAdd(id) { // 隐藏增加资源组件
        this.isShowAdd = false
        if (id != null) {
          this.$router.push({path: `${this.componentsOption[id].path}`})
        }
      },
      linkToEdit(id, sort, type) { // 跳转至查看详情
        this.$router.push({path: `${this.componentsOption[id].path}`})
      },
      handleSizeChange(val) { // 切换每页几条数据方法
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) { // 切换当前页
        console.log(`当前页: ${val}`)
      }
    },
    mounted() {
      this.getModelPermission()
      this.listQuery.total = this.tableData.length
    }
  }
</script>

<style scoped>
  a:hover {
    color: #0A76A4;
  }

  .resource-top {
    display: flex;
    margin: 20px 20px 0 20px;
    flex-direction: row;
    justify-content: space-between;
  }

  .resource-box {
    width: 538px;
    height: 160px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .resource-box a {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-right: 1px solid #eee;
    width: 33%;
    height: 90px;
    align-items: center;
  }

  .resource-box .width70 {
    width: 70%;
  }

  .circle-o {
    border-radius: 50%;
    border: 1px solid #996600;
    color: #996600;
    font-size: 12px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
  }

  .circle-b {
    border-radius: 50%;
    border: 1px solid #0e90d2;
    color: #0e90d2;
    font-size: 12px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
  }
</style>
